<template>
    <el-container :style="{ height: `${bodyHeight}px` }">
        <el-aside :width="`${asideWidth}px`" class="aside">
            <Logo v-model="isCollapse" title="可视化"></Logo>
            <Menus v-model="isCollapse"></Menus>
            <div class="collapse">
                <div class="fold" @click="onCollapse">
                    <component :is="isCollapse ? 'Expand' : 'Fold'" style="width: 1em; height: 1em;"></component>
                </div>
            </div>
        </el-aside>
        <el-main style="padding: 0">
            <WorkBench :height="bodyHeight - headerHeight" />
        </el-main>
    </el-container>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { WorkBench, Logo, Menus } from './layout';
import { useResize } from './hooks'

const asideWidth = ref(200), headerHeight = ref(50)
const isCollapse = ref(false)
const onCollapse = () => {
    isCollapse.value = !isCollapse.value;
    asideWidth.value = isCollapse.value ? 65 : 200;
}
const { bodyHeight } = useResize();
</script>

<style lang="scss" scoped>
.aside {
    --el-menu-bg-color: var(--yf-menu-bg-color, #03284b);
    --el-menu-hover-bg-color: var(--yf-menu-hover-bg-color, #02203c);
    --el-menu-text-color: var(--yf-menu-text-color, white);
    --el-menu-active-color: var(--yf-menu-active-color, yellowgreen);

    background-color: var(--el-menu-bg-color);
    transition: all .3s;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.collapse {
    height: 48px;

    .fold {
        width: 64px;
        height: 48px;
        color: var(--yf-menu-text-color, white);
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        font-size: 20px;

        &:hover {
            background-color: var(--el-menu-hover-bg-color);
        }
    }
}
</style>